<template>
  <div class="add_workflow container-content">
    <!-- title -->
    <div class="add_workflow_title">
      <div class="add_workflow_title_left">
        <svg
          t="1716122916140"
          class="icon"
          viewBox="0 0 1025 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2624"
          width="200"
          height="200"
        >
          <path
            d="M582.352706 568.885667c-3.173009-1.033003-23.208068-10.067029-10.688031-48.126141l-0.173001 0c32.628096-33.602098 57.568169-87.703257 57.568169-140.945413 0-81.88124-54.45416-124.788366-117.727345-124.788366-63.311185 0-117.455344 42.908126-117.455344 124.788366 0 53.458157 24.803073 107.775316 57.627169 141.295414 12.792037 33.563098-10.08603 46.021135-14.873044 47.77614-66.271194 23.96307-144.009422 67.648198-144.009422 110.771325l0 16.157047c0 58.755172 113.910334 72.111211 219.332643 72.111211 105.578309 0 218.047639-13.356039 218.047639-72.111211l0-16.157047C730.001139 635.229861 651.87491 591.897734 582.352706 568.885667L582.352706 568.885667zM582.352706 568.885667"
            fill="#1296db"
            p-id="2625"
          ></path>
          <path
            d="M511.308498 958.895809c-246.714723 0-447.417311-200.702588-447.417311-447.423311 0-246.714723 200.702588-447.417311 447.417311-447.417311 246.721723 0 447.423311 200.702588 447.423311 447.417311C958.731809 758.194221 758.029221 958.895809 511.308498 958.895809L511.308498 958.895809zM511.308498 128.259376c-211.307619 0-383.213123 171.905504-383.213123 383.213123 0 211.279619 171.905504 383.219123 383.213123 383.219123 211.279619 0 383.219123-171.939504 383.219123-383.219123C894.527621 300.165879 722.588117 128.259376 511.308498 128.259376L511.308498 128.259376zM511.308498 128.259376"
            fill="#1296db"
            p-id="2626"
          ></path>
        </svg>
        <div style="margin: 0 10px">新建流程</div>
        <el-tag size="small">v1</el-tag>
      </div>

      <div class="add_workflow_title_center">
        <div class="tab_item bgc_animation"></div>
        <div
          @click="handleClickActive(1)"
          :class="{ tab_item_active: currentActive === 1 }"
          class="tab_item"
        >
          ①基础设置
        </div>
        <!-- <div
          @click="handleClickActive(2)"
          :class="{ tab_item_active: currentActive === 2 }"
          class="tab_item"
        >
          ②表单设计
        </div> -->
        <div
          @click="handleClickActive(2)"
          :class="{ tab_item_active: currentActive === 2 }"
          class="tab_item"
        >
          ②流程设计
        </div>
      </div>

      <div class="add_workflow_title_right">
        <el-button
          :disabled="currentActive !== 2"
          :type="currentActive !== 2 ? 'info' : 'primary'"
          class="add_btn"
          size="small"
          @click="publishWorkFlow"
          >发布</el-button
        >
      </div>
    </div>
    <!-- content -->
    <div class="add_workflow_content">
      <div v-show="currentActive == 1">
        <basic-setting ref="basicSetting"></basic-setting>
      </div>
      <!-- <div v-show="currentActive == 2">
        <form-design ref="formDesign"></form-design>
      </div> -->
      <div v-show="currentActive == 2">
        <process-design ref="processDesign"></process-design>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { publishProcess } from "@/api/model/index";
import { mapState } from "vuex";
import basicSetting from "./basicSetting";
import formDesign from "./formDesign";
import processDesign from "./processDesign";
export default {
  data() {
    return {
      activeName: "second",
      currentActive: 1,
      basicConfig: {},
      formConfig: {},
      processConfig: {},
    };
  },
  components: {
    basicSetting,
    formDesign,
    processDesign,
  },
  computed: {
    ...mapState({
      nodeConfig: (state) => state.workflow.nodeConfig,
    }),
  },
  methods: {
    //点击item
    handleClickActive(index) {
      let ele = document.querySelector(".bgc_animation");
      const x = (index - 1) * 140 + "px";
      if (index > this.currentActive) {
        if (this.currentActive === 1) {
          if (this.validatebasic()) {
            this.currentActive = index;
            ele.style.transform = `translateX(${x})`;
          }
        } else if (this.currentActive === 2) {
          // if (this.validateform()) {
          this.currentActive = index;
          ele.style.transform = `translateX(${x})`;
          // } else {
          //   this.$message.error("请选择左侧组件拖动至中间位置~~");
          // }
        }
      } else {
        this.currentActive = index;
        ele.style.transform = `translateX(${x})`;
      }
    },
    //基础设置表单校验
    validatebasic() {
      this.basicConfig = this.$refs.basicSetting.validateForm();
      return this.basicConfig;
    },
    //表单设计器检验
    // validateform() {
    //   this.formConfig = this.$refs.formDesign.validateForm();
    //   return this.formConfig.widgetList.length;
    // },
    //发布
    publishWorkFlow() {
      console.log("nodeConfig", this.nodeConfig);
      // console.log("formConfig", this.formConfig);
      console.log("basicConfig", this.basicConfig);
      let nodeConfig = JSON.parse(JSON.stringify(this.nodeConfig));
      if (!nodeConfig.child) {
        this.$message({
          message: `【发起人】下一节点为空！`,
          type: "warning",
        });
        return;
      }
      const checkRoleList = [];
      const checkNode = (node) => {
        if (!node.child) {
          node.child = {
            type: "end",
            id: "end_" + Date.now(),
            pid: node.id,
            name: "结束",
          };
        } else {
          node.child.name = node.child.name + "$@" + uuidv4();
          if (!node.child.roleList || !node.child.roleList.length) {
            checkRoleList.push(node.child.name);
          }
          checkNode(node.child);
        }
      };
      checkNode(nodeConfig);
      if (checkRoleList.length) {
        const checkRoleListStr = checkRoleList.join("、");
        this.$message({
          message: `【${checkRoleListStr}】未指派角色审核！`,
          type: "warning",
        });
        return;
      }
      const data = {
        code: "process-" + Date.now(),
        // formData: JSON.stringify(this.formConfig),
        groupId: this.basicConfig.groupId,
        groupName: this.basicConfig.groupName,
        id: Date.now(),
        menuId: this.basicConfig.business[0],
        modelData: JSON.stringify(nodeConfig),
        name: this.basicConfig.name,
        process: nodeConfig,
        remark: this.basicConfig.desc,
        sort: 1,
        version: 1,
      };
      publishProcess(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("发布成功");
          this.$store.dispatch("tagsView/delAndPush", {
            name: "Workflow",
            path: "/System/process",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.add_workflow_title {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  height: 70px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .add_workflow_title_left {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: bold;
    .el-tag {
      border-radius: 5px;
    }
  }
  .add_workflow_title_center {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    .bgc_animation {
      position: absolute;
      background-color: #ecf5ff;
      border-bottom: 2px solid #1890ff;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .tab_item {
      padding: 0 20px;
      height: 100%;
      font-size: 14px;
      width: 140px;
      line-height: 70px;
      text-align: center;
      cursor: pointer;
      color: #303133;
      font-weight: bold;
    }
    .tab_item:hover {
      color: #1890ff;
    }

    .tab_item_active {
      color: #1890ff;
      position: relative;
    }
  }
}
.add_workflow_title_right {
  .add_btn {
    width: 70px;
  }
}
.icon {
  background-color: #d9ecff;
  border-radius: 5px;
  height: 40px;
  width: 40px;
  padding: 5px;
}
</style>
